<template>
  <div class="container">
    <el-row>
      <el-form
        ref="ruleForm"
        :model="info"
        label-width="120px"
        :rules="rulesForm"
      >
        <el-form-item label="用户名：" prop="user_name">
          <el-input
            v-model="info.user_name"
            placeholder="请输入你的用户名"
          ></el-input>
          <span style="color: red; font-size: 12px">用于登录(务必记住好)</span>
        </el-form-item>
        <el-form-item label="昵称" prop="nick_name">
          <el-input
            v-model="info.nick_name"
            placeholder="请输入你的昵称"
          ></el-input>
          <span style="color: red; font-size: 12px"
            >用于展示(赶紧自己起一个帅气的名字吧)</span
          >
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number
            controls-position="right"
            v-model="info.age"
            placeholder="请输入你的年龄"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="info.gender" placeholder="请输入你的性别">
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="info.phone"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色:" prop="role">
          <el-select v-model="info.role" placeholder="请输入你的性别">
            <el-option
              v-for="item in roleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像:" prop="avatar">
          <el-col>
            <el-upload
              class="avatar-uploader"
              name="avatar"
              action="http://192.168.0.197:3000/upload/avatar"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="info.avatar" :src="info.avatar" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
            </el-upload>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="30">
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { useStore } from "vuex";
import { Plus } from "@element-plus/icons";
import { ElNotification } from "element-plus";
import { post } from "../../api/api.js";
const store = useStore();
const info = ref({
  user_name: "", // 用户名称
  age: "", // 年龄
  gender: "", // 性别
  nick_name: "", // 用户名称
  phone: "", // 手机号码
  role: "", // 角色
  avatar: "", // 头像
});
// 表单验证
const rulesForm = ref({
  user_name: [{ required: true, message: "请输入您的用户名", trigger: "blur" }],
  age: [{ required: true, message: "请输入您的年龄", trigger: "blur" }],
  gender: [{ required: true, message: "请选择你的性别", trigger: "blur" }],
  nick_name: [{ required: true, message: "请输入你的昵称", trigger: "blur" }],
  phone: [{ required: true, message: "请填写你的手机号码", trigger: "blur" }],
  role: [{ required: true, message: "请选择的角色", trigger: "blur" }],
  avatar: [{ required: true, message: "请上传你的头像", trigger: "blur" }],
});
// 性别列表
const genderList = ref([
  { value: 0, label: "女" },
  { value: 1, label: "男" },
  { value: 2, label: "保密" },
]);
// 权限列表
const roleList = ref([
  { value: 1, label: "管理员" },
  { value: 2, label: "操作者" },
  { value: 3, label: "查询员" },
]);
// 验证ref
const ruleForm = ref("");
const handleAvatarSuccess = (file) => {
  info.value.avatar = file.msg;
};

const onSubmit = () => {
  ruleForm.value.validate(async (valid) => {
    if (valid) {
      // alert("submit");
      info.value.user_id = store.state.userinfo.user_id;
      let res = await post("/info/update/userinfo", info.value);
      if (res.code == 0) {
        store.commit("setUserInfo",info.value);
        ElNotification({
          title: "修改成功",
        });
      }
    } else {
      ElNotification({
        title: "请输入完整的数据",
      });
    }
  });
};

onMounted(() => {
  info.value = store.state.userinfo;
});
</script>
<style lang="scss" scoped>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 74px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
